<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../bootsttrap/css/bootstrap.min.css">
  <script src="../jquery-3.6.0.js"></script>
  <style>

    .box1{
      height: 100%;
      width: 100%;
    }
    .box2{
      width: 400px;
      height: 500px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50% ,-50%);
      border: 1px solid black;
      display: flex;
      justify-content: center;
      
    }
    .box3{
      margin-top: 50px;
    }
  </style>
</head>

<body>
  <div class="box1">
  <div class="box2">
    <div class="box3">
      <p>用户名</p>
      <input type="text" class="user">
      <p>密码</p>
      <input type="password" class="pswer">
      <br><br>
      <input type="checkbox" class="ischeck">
      <span>是否记住密码</span>
      <br><br>
      <button class="btn-on">登录</button>
      <button class="btn-in">注册</button>
    </div> 
    </div>
  </div>
  <script>
    //判断是否是首次登录

    localStorage.getItem('username')
    localStorage.getItem('psw')
    if (localStorage.getItem('username') && localStorage.getItem('psw')) {
      $('.user').val(localStorage.getItem('username'))
      $('.pswer').val(localStorage.getItem('psw'))
      $('.ischeck').prop('checked', true)
    }
    //复选框储存

    $('.ischeck').change(function () {
      var text = $(".user").val()
      var pswer = $(".pswer").val()
      console.log(text, pswer);
      if (text == '' || pswer == '') {
        alert('账号和密码不能为空')
      } else {
        if ($(".ischeck").prop('checked')) {
          console.log(111);
          localStorage.setItem('username', text)
          localStorage.setItem('psw', pswer)
        } else {
          console.log(222)
          localStorage.removeItem('username')
          localStorage.removeItem('psw')
        }
      }
    })
    //给按钮绑定点击事件
    $('.btn-on').click(function () {
      console.log(111)
      var text = $(".user").val()
      var pswer = $(".pswer").val()
      if (text == '' || pswer == '') {
        alert('账号和密码不能为空')
      } else {
        if ($('.ischeck').prop('checked')) {
          localStorage.setItem('username', text)
          localStorage.setItem('psw', pswer)
        }
        $.ajax({
          type: "post",
          url: "https://api.it120.cc/conner/user/username/login",
          data: {
            deviceId: "deviceId",
            deviceName: "deviceName",
            pwd: pswer, // pwd : pwd
            username: text
          }
        }).then(res => {
          console.log(res, "login - res");
          if(res.code==500){
            alert(res.msg)
          }else if(res.code==0){
            console.log(2)
            alert(res.msg)
            localStorage.setItem('code',res.code)
            localStorage.setItem('token',res.data.token)
            history.go(-1)
          }
        })
      }
    })
    $(".btn-in").click(function(){
      var text = $(".user").val()
      var pswer2 = $(".pswer").val()
      console.log(text,pswer2);
      if (text == '' ||pswer2=='') {
        alert('账号 验证码和密码不能为空')
      } else {
        
        $.ajax({
          type: "post",
          url: 'https://api.it120.cc/conner//user/username/register',
          data: {
           username:text,
           pwd:pswer2
          }
        }).then(res => {
          console.log(res, "login - res");
          if(res.code==0){
            alert(res.msg)
          }else if(res.code==10000){
            alert(res.msg)
          }
        })
      }
    })
  </script>
</body>

</html>